<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title"></TitleCompound>
    </div>

    <!-- Content -->
    <div>
      <!-- 说明 -->
      <p><b><a href="https://cn.vuejs.org/api/composition-api-lifecycle.html">hooks</a></b></p>

      <el-alert title="请查看console日志" type="info"></el-alert>

      <p>sum: {{ sum }}</p>
      <el-button @click="addOne" type="primary">Add One</el-button>

      <el-divider></el-divider>


      <h3>显示小狗</h3>
      <!-- <p>dogList: {{ dogList }}</p> -->
      <!-- dogList Table -->
      <el-table :data="dogList">
        <el-table-column prop="message" label="dog"></el-table-column>
        <el-table-column prop="status" label="status"></el-table-column>
      </el-table>
      <el-row>
        <!-- 这里解构时，将message重命名为dog -->
        <div v-for="{ message: dog } in dogList" :key="dog">
          <el-col :span="8">
            <el-image :src="dog" fit="contain" class="dog"></el-image>
          </el-col>
        </div>
      </el-row>
      <el-button @click="oneMoreDog" type="primary">Get a Dog</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import TitleCompound from '@/components/TitleCompound.vue';
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';
import useDog from "@/hooks/useDog";
const title = "Hooks Quickstart"
const { getADog, dogList } = useDog()

const sum = ref(0)
function addOne() {
  sum.value += 1
}

onBeforeMount(() => {
  console.log("onBeforeMount")
})

onMounted(() => {
  console.log("onMounted")
})

onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
})

onUnmounted(() => {
  console.log("onUnmounted")
})


onBeforeUpdate(() => {
  console.log("onBeforeUpdate")
})

onUpdated(() => {

  console.log("onUpdated")
})


// 自定义钩子
// const dogList = ref<string[]>([])

async function oneMoreDog() {
  const dog = await getADog()
  console.log("the dog is ", dog)
  if (dog.status === 'success') {
    console.log(dog);

    // dogList.value?.push(dog.message)
  }
  console.log(dogList.value);
}


</script>
<style lang="scss" scoped>
.dog {
  width: 100px;
  ;
}
</style>
